<template>
  <div>
  <el-container style="height: 700px;">

    <el-header style="text-align: right; font-size: 12px;">


      <el-button @click="insertStudent" style="text-align: left;">新增</el-button>
      <el-dropdown>
        <span style="cursor: pointer">{{$store.state.empName}}<i class="el-icon-arrow-down "  style=" cursor: pointer" ></i></span>
        <el-dropdown-menu slot="dropdown">
          <el-dropdown-item><span @click="loginOut()">退出</span></el-dropdown-item>
        </el-dropdown-menu>
      </el-dropdown>

    </el-header>
<!--    搜索框-->
    <div style="margin: 15px">
<!--      学生姓名-->
      <span style="float: left;text-align: center;align-content: center;height: 40px;line-height: 40px">学生姓名&nbsp;</span>
      <el-input v-model="condition.studentName" placeholder="学生姓名" style="width: 10%;float: left"></el-input>
      <!--      学生姓名-->
      <span style="float: left;text-align: center;align-content: center;height: 40px;line-height: 40px">联系方式&nbsp;</span>
      <el-input v-model="condition.studentPhone" placeholder="联系方式" style="width: 10%;float: left"></el-input>
<!--      班级-->
      <span style="float: left;text-align: center;align-content: center;height: 40px;line-height: 40px">班级&nbsp;</span>
    <el-select v-model="condition.classId" placeholder="请选择班级" style="width: 10%;float: left">
      <el-option
        v-for="item in classList"
        :key="item.classId"
        :label="item.className"
        :value="item.classId">
      </el-option>
    </el-select>
<!--      学员状态-->
      <span style="float: left;text-align: center;align-content: center;height: 40px;line-height: 40px">学员状态&nbsp;</span>
      <el-select v-model="condition.studentStatus" placeholder="学员状态" style="width: 10%;float: left">
        <el-option label="在读" value="1"></el-option>
        <el-option label="退学" value="2"></el-option>
        <el-option label="休学" value="3"></el-option>
        <el-option label="开除" value="4"></el-option>
        <el-option label="自主就业" value="5"></el-option>
        <el-option label="正常毕业" value="6"></el-option>
      </el-select>
    <el-button @click="searchClass()" style="float: left" type="primary" icon="el-icon-search">搜索</el-button>
      <el-button @click="getStudent()" style="float: left;align-content: center" icon="el-icon-refresh">重置</el-button>
    </div>
    <!--  表数据-->
    <el-main>
      <el-table :data="page.records" border stripe>
<!--        el-table属性：border 表格边框，stripe：斑马纹，:data 绑定数据-->
        <el-table-column prop="studentId" label="学员编号"></el-table-column>
        <el-table-column prop="studentNumber" label="学籍号" ></el-table-column>
        <el-table-column prop="studentName" label="学员姓名"></el-table-column>
        <el-table-column prop="studentGender" label="学员性别" >
          <template slot-scope="scope">
            <span>{{showSex(scope.row)}}</span>
          </template>
        </el-table-column>
        <el-table-column prop="studentAge" label="学员年龄" ></el-table-column>
        <el-table-column prop="studentCard" label="身份证号码" ></el-table-column>
        <el-table-column prop="brithday" label="出生日期" ></el-table-column>
        <el-table-column prop="studentPhone" label="手机号码" ></el-table-column>
        <el-table-column prop="enrolTime" label="入学时间" ></el-table-column>
        <el-table-column prop="enrolEducation" label="教育程度" ></el-table-column>
        <el-table-column prop="educationPromotion" label="学历提升"></el-table-column>
        <el-table-column prop="studnetAddress" label="家庭住址" ></el-table-column>
        <el-table-column prop="gradeId" label="年级编号"></el-table-column>
        <el-table-column prop="qqAccount" label="QQ号码"></el-table-column>
        <el-table-column prop="wechatAaccout" label="微信号码" ></el-table-column>
        <el-table-column prop="email" label="邮箱" width="160"></el-table-column>
        <el-table-column prop="graduateSchool" label="毕业学校" ></el-table-column>
        <el-table-column prop="graduateTime" label="毕业时间"></el-table-column>
        <el-table-column prop="parentName" label="家长姓名" ></el-table-column>
        <el-table-column prop="parentMoblie" label="家长联系方式" ></el-table-column>
        <el-table-column prop="tuitionFeePayer" label="学费出资人" ></el-table-column>
        <el-table-column prop="isSupport" label="家长是否支持" >
          <template slot-scope="scope">
            <span>{{showIsSupport(scope.row)}}</span>
          </template>
        </el-table-column>
        <el-table-column prop="qingNiaoPassNo" label="青鸟通行证号"></el-table-column>
        <el-table-column prop="qingNiaoPassNoPwd" label="青鸟通行证号密码"></el-table-column>
        <el-table-column prop="specialInstructions" label="特殊说明" ></el-table-column>
        <el-table-column prop="isStay" label="是否住宿" >
          <template slot-scope="scope">
            <span>{{showIsStay(scope.row)}}</span>
          </template>
        </el-table-column>
        <el-table-column prop="planner" label="咨询师" ></el-table-column>
        <el-table-column prop="studentStatus" label="学员状态" >
          <template slot-scope="scope">
            <span>{{showStatus(scope.row)}}</span>
          </template>
        </el-table-column>
        <el-table-column prop="classId" label="班级编号"></el-table-column>
        <el-table-column prop="studentId" label="操作" >
          <template slot-scope="scope">
            <a href="#" @click="updateStudent(scope.row)">修改</a>
            <a href="#" @click="deleteStudent(scope.row)">删除</a>
            <a href="#" @click="payStudent(scope.row)">缴费</a>
          </template>
        </el-table-column>
      </el-table>
<!--      分页控件-->
      <div class="block">
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="page.current"
          :page-sizes="[5, 8, 10, 12]"
          :page-size="5"
          layout="total, sizes, prev, pager, next, jumper"
          :total="page.total">
        </el-pagination>
      </div>
    </el-main>

<!--    添加/修改学生对话框-->
    <el-dialog
      title="操作学生"
      :visible.sync="insertStudentDialogVisible"
      width="30%"
      :before-close="handleClose">
      <div id="studentChangeForm">
        <span v-if="student.studentId!=null">学员编号</span>  <el-input v-model="student.studentId" placeholder="学员编号" v-if="student.studentId!=null" style="width: 220px"></el-input><br>
        <span>学员姓名</span><el-input v-model="student.studentName" placeholder="学员姓名" style="width: 220px"></el-input><br>
        <span>性别</span>
          <el-radio v-model="student.studentGender" label="0" style="width: 120px">女</el-radio>
          <el-radio v-model="student.studentGender" label="1">男</el-radio>
          <br>
        <span>学员年龄</span><el-input v-model="student.studentAge" placeholder="学员年龄" style="width: 220px"></el-input><br>
        <span>学生班级</span><el-input v-model="student.classId" placeholder="学生班级" style="width: 220px"></el-input><br>
        <span>身份证号</span><el-input v-model="student.studentCard" placeholder="身份证号码" style="width: 220px"></el-input><br>
        <div class="block" >
          <span class="demonstration">出生日期</span>
          <el-date-picker
            v-model="student.brithday"
            type="date"
            value-format="yyyy-MM-dd"
            placeholder="选择日期">
          </el-date-picker>
        </div>
        <span>手机号码</span><el-input v-model="student.studentPhone" placeholder="手机号码" style="width: 220px"></el-input>
        <div class="block" >
          <span class="demonstration">入学时间</span>
          <el-date-picker
            v-model="student.enrolTime"
            type="date"
            value-format="yyyy-MM-dd"
            placeholder="选择日期">
          </el-date-picker>
        </div>
        <span>教育程度</span>
          <el-select v-model="student.enrolEducation" placeholder="请选择受教育程度">
            <el-option label="博士" value="博士"></el-option>
            <el-option label="硕士" value="硕士"></el-option>
            <el-option label="本科" value="本科"></el-option>
            <el-option label="大专" value="大专"></el-option>
            <el-option label="高中" value="高中"></el-option>
            <el-option label="职高/中专" value="职高/中专"></el-option>
            <el-option label="初中" value="初中"></el-option>
            <el-option label="小学" value="小学"></el-option>
            <el-option label="无学历" value="无学历"></el-option>
          </el-select>
        <br>
        <span>学历提升</span><el-input v-model="student.educationPromotion" placeholder="学历提升" style="width: 220px"></el-input><br>
        <span>家庭住址</span><el-input v-model="student.studnetAddress" placeholder="家庭住址" style="width: 220px"></el-input><br>
        <span>年级编号</span><el-input v-model="student.gradeId" placeholder="年级编号" style="width: 220px"></el-input><br>
        <span>Q Q 号码</span><el-input v-model="student.qqAccount" placeholder="QQ号码" style="width: 220px"></el-input><br>
        <span>微信号码</span><el-input v-model="student.wechatAaccout" placeholder="微信号码" style="width: 220px"></el-input><br>
        <span>邮箱号码</span><el-input v-model="student.email" placeholder="邮箱" style="width: 220px"></el-input><br>
        <span>毕业学校</span><el-input v-model="student.graduateSchool" placeholder="毕业学校" style="width: 220px"></el-input><br>
        <div class="block" >
          <span class="demonstration">毕业时间</span>
          <el-date-picker
            v-model="student.graduateTime"
            type="date"
            value-format="yyyy-MM-dd"
            placeholder="选择日期">
          </el-date-picker>
        </div>
        <span>家长姓名</span><el-input v-model="student.parentName" placeholder="家长姓名" style="width: 220px"></el-input><br>
        <span>家长联系</span><el-input v-model="student.parentMoblie" placeholder="家长联系方式" style="width: 220px"></el-input><br>
        <span>学费出资</span><el-input v-model="student.tuitionFeePayer" placeholder="学费出资人" style="width: 220px"></el-input><br>
        <span>是否支持</span>
          <el-radio v-model="student.isSupport" label="0" style="width: 120px">否</el-radio>
          <el-radio v-model="student.isSupport" label="1">是</el-radio>
        <br>
        <span>青鸟证号</span><el-input v-model="student.qingNiaoPassNo" placeholder="青鸟通行证号" style="width: 220px"></el-input><br>
        <span>青鸟密码</span><el-input v-model="student.qingNiaoPassNoPwd" placeholder="青鸟通行证号密码" style="width: 220px"></el-input><br>
        <span>特殊说明</span><el-input v-model="student.specialInstructions" placeholder="特殊说明" style="width: 220px"></el-input><br>
        <span>是否住宿</span>
          <el-radio v-model="student.isStay" label="0" style="width: 120px">否</el-radio>
          <el-radio v-model="student.isStay" label="1">是</el-radio>
        <br>
        <span>咨询师&nbsp;&nbsp;&nbsp;&nbsp;</span><el-input v-model="student.planner" placeholder="咨询师" style="width: 220px"></el-input><br>
        <span>学员状态</span>
          <el-select v-model="student.studentStatus" placeholder="请选择学生状态">
            <el-option label="在读" value="1"></el-option>
            <el-option label="退学" value="2"></el-option>
            <el-option label="休学" value="3"></el-option>
            <el-option label="开除" value="4"></el-option>
            <el-option label="自主就业" value="5"></el-option>
            <el-option label="正常毕业" value="6"></el-option>
          </el-select>

      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="studentDialogCancel">取 消</el-button>
        <el-button type="primary" @click="studentDialogCommit">确 定</el-button>
      </span>
    </el-dialog>
    <!--    财务缴费对话框-->
    <el-dialog
      title="财务缴费"
      :visible.sync="paymentDialogVisible"
      width="50%"
      :before-close="handleClose">
      <div>
        <el-input v-model="payment.studentId" placeholder="学员编号"></el-input>
        <el-input v-model="payment.pmTypeId" placeholder="缴费项目编号"></el-input>
        <el-input v-model="payment.paymentMoney" placeholder="缴费金额"></el-input>
        <el-input v-model="payment.paymentTime" placeholder="缴费时间"></el-input>
        <el-input v-model="payment.isPeriodization" placeholder="是否分期"></el-input>
        <el-input v-model="payment.paymentMode" placeholder="付款方式"></el-input>
        <el-input v-model="payment.preparedBy" placeholder="制单人"></el-input>
        <el-input v-model="payment.remarks" placeholder="备注"></el-input>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="paymentCancel">取 消</el-button>
        <el-button type="primary" @click="paymentCommit">确 定</el-button>
      </span>
    </el-dialog>
  </el-container>
  </div>
</template>

<script>
import instance from "../../utils/request";

export default {
  name: "StudentInfo",
  data(){
    return {
      page: {//页面对象
        current:1,//当前页码
        size:5,//页面大小
        total:0,//数据总条数
        records:{}//数据
      },
      payment:{},//缴费对象
      student:{},//学生对象
      paymentDialogVisible: false,//缴费对话框显示
      insertStudentDialogVisible: false,//添加、修改学生对话框显示
      classList:{},
      condition:{}//条件对象
    }
  },
  methods:{
    showSex(row, column) {//显示学员性别
      let sex='';
      if(row.studentGender==1){
        sex = '男';
      }else {
        sex = '女';
      }
      return sex;
    },
    showStatus(row, column) {//显示学员报名状态
      let status='';
      if(row.studentStatus==1){
        status = '在读';
      }else if (row.studentStatus==2){
        status = '退学';
      }else if (row.studentStatus==3){
        status = '休学';
      }else if (row.studentStatus==4){
        status = '开除';
      }else if (row.studentStatus==5){
        status = '自主就业';
      }else if (row.studentStatus==6){
        status = '正常毕业';
      }
      return status;
    },
    showIsSupport(row,column)  {//显示家长是否支持
      let support = '';
      if (row.isSupport == 0){
        support = '不支持';
      }else if (row.isSupport == 1){
        support = '支持';
      }
      return support;
    },
    showIsStay(row,column)  {//显示是否住宿
      let isStay = '';
      if (row.isStay == 0){
        isStay = '不住宿';
      }else if (row.isSupport == 1){
        isStay = '住宿';
      }
      return isStay;
    },
    updateStudent(row) {//修改学生信息
      this.student.studentId = row.studentId;
      instance.get("/student/"+row.studentId).then(res=>{
        this.student = res.data;
      });
      this.insertStudentDialogVisible = true;
    },
    deleteStudent(row) {//删除学生
      instance.delete("/student/"+row.studentId).then(res=>{
        if (res.data>0){
          this.$message("删除学生成功!");
          this.getStudent();//重新加载学生信息
          this.$router.push({name:'StudentInfo'});//路由跳转
        }else {
          this.$message("删除学生失败!");
          this.getStudent();//重新加载学生信息
        }
      });
      this.getStudent();//重新加载学生信息
    },
    insertStudent(){//添加学生
      this.student = {};
      this.insertStudentDialogVisible = true;
    },
    payStudent(row) {//学生缴费
      this.paymentDialogVisible = true;//显示缴费对话框
      this.payment.studentId = row.studentId;
    },
    paymentCommit(){//缴费对话框提交
      //提交到后台
      instance.post("/payment",this.payment).then(res=>{
        if (res.data>0){//受影响行数>0表示成功
          this.$message("缴费成功!");
          this.payment = {};//清空表单
          this.paymentDialogVisible = false;//隐藏弹出窗
          this.getStudent();//重新加载学生信息
        }else {
          this.$message("缴费失败!");
          this.payment = {};//清空表单
          this.getStudent();//重新加载学生信息
        }
      });
    },
    paymentCancel(){//缴费对话框取消
      this.$message("已取消!");
      this.payment = {};//清空表单
      this.paymentDialogVisible = false;//隐藏弹出窗
    },
    studentDialogCommit(){//添加/修改学生对话框提交
      console.log(this.student);
      //提交到后台
      instance.post("/student",this.student).then(res=>{
        if (res.data>0){//受影响行数>0表示成功
          this.$message("操作成功!");
          this.getStudent();//重新加载学生信息
        }
      });
      this.student = {};//清空表单
      this.insertStudentDialogVisible = false;//关闭对话框
      this.getStudent();//重新加载学生信息
    },
    studentDialogCancel(){//学生对话框取消
      this.$message("已取消!");
      this.student = {};//清空表单
      this.insertStudentDialogVisible = false;//隐藏弹出窗
    },
    handleSizeChange(val) {//分页控件 改变页面大小时执行
      this.page.size = val;
      if (Object.keys(this.condition).length == 0){
        this.getStudent();
      }else {
        this.searchClass();
      }
    },
    handleCurrentChange(val) {//分页控件 改变当前页码时执行
      this.page.current = val;
      if (Object.keys(this.condition).length == 0){
        this.getStudent();
      }else {
        this.searchClass();
      }
    },
    handleClose(done) {//X关闭对话框
      this.$confirm('确认关闭？')
        .then(_ => {
          done();
        })
        .catch(_ => {});
    },
    getStudent(){
      this.condition = {};//清空条件
      //获取所有学生信息分页形式
      instance.get("/student/page/"+this.page.current+"/"+this.page.size).then(res=>{
        this.page = res.data;//查询数据并赋值
      });
    },
    searchClass(){
      //按条件查询获取学生信息分页形式
      this.condition.current = this.page.current;
      this.condition.pageSize = this.page.size;
      instance.post("/student/condition",this.condition).then(res => {
        this.page = res.data;//查询数据并赋值
      });
    },
    getClasses(){//查询班级
      instance.get("/classes").then(res=>{
        this.classList = res.data;
      })
    },
    loginOut(){//退出登录
      instance.get("/user/logout");
      location.reload();
    }
  },
  created() {//使用该组件时执行
    this.getStudent();
    this.getClasses();
    if (this.$store.state.roleId == 0){
      this.$message('请先登录');
      this.$router.push({name:'Login'});
    }
  }
}
</script>

<style scoped>
.el-header {
  background-color:#B3C0D1;
  color: #333;
  line-height: 60px;
}
a {
  color: #42b983;
}
</style>
